<script setup lang="ts">
import {reactive, ref} from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import { FormInstance, FormRules } from 'element-plus';
import {post} from "@/axios";
import {useUserStore,useTokenStore} from "@/store";
import { provide } from 'vue';
import {useRouter}  from "vue-router";

interface LoginForm {
  username: string;
  password: string;
}

const loginStatus = ref(false)
let ruleFormRef = ref<FormInstance>();
const userStore = useUserStore();
const tokenStore = useTokenStore();
const router = useRouter();
const loginForm = reactive<LoginForm>({
  username: '',
  password: '',
});

const validateUsername = (rule: any, value: any, callback: any)=>{
  console.log(value)
  if (value === '') {
    callback(new Error('用户名不能为空'))
  } else if (value.length < rule.min){
    callback(new Error(`用户不能小于${rule.min}位`))
  }
  else {
    callback()
  }
}

const validatePassword = (rule: any, value: any, callback: any)=>{
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else if (value.length < rule.min){
    callback(new Error(`密码不能小于${rule.min}位`))
  }else {
    callback()
  }
}

const loginRules = reactive<FormRules<LoginForm>>({
  username: [{ validator: validateUsername,min:4,required:true,trigger: 'blur' }],
  password:[{validator: validatePassword,min:6,required:true,trigger: 'blur'}]
});

const onSubmit = async () => {
  loginStatus.value = true;
/*  await ruleFormRef.validate((valid, fields) => {
    console.log(valid);
    console.log(fields);
    if (!valid) {
      console.log('submit!');
    } else {
      console.log('error submit!', fields);
    }
  });*/

     await post("User/Login", loginForm).then(async (result:any)=>{
       if (result.status == 200){
         const user = result.data
         userStore.login(user.username, user.email, user.phone)
         tokenStore.login("Bearer  "+user.token)
         provide("login",true)
         await router.push("/main")
         window.location.reload();
       }
     }).catch((e:any)=>{
       console.log(e)
       loginStatus.value = false;
     })

};


</script>

<template>
  <div class="login-container">
    <div class="login-form-container">
      <h4 class="login-title">后台管理系统</h4>
      <el-form
          ref="ruleFormRef"
          :rules="loginRules"
          label-position="top"
          :model="loginForm"
          label-width="auto"
          style="max-width: 500px">
        <el-form-item class="login-form-label" prop="username">
          <el-input
              :prefix-icon="User"
              class="input-login-info"
              v-model="loginForm.username"
              placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item class="login-form-label" prop="password">
          <el-input
              :prefix-icon="Lock"
              class="input-login-info"
              v-model="loginForm.password"
              placeholder="请输入密码"
              type="password" />
        </el-form-item>
        <el-form-item>
          <el-button
              :disabled="loginStatus"
              class="login-form-btn" 
              type="primary" 
              @click="onSubmit" 
              size="large">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #304156;
}
.login-title {
  font-size: 2em;
  text-align: center;
  color: #fff;
}
.login-form-container {
  width: 300px;
}
.login-form-btn {
  width: 100%;
}
.input-login-info {
  padding: 5px;
  font-size: 15px;
  background-color: #283443;
  font-family: 宋体;
}
</style>
